<template>
	<view class="pages" v-if="orderInfo">
		
		<!-- 取餐号 -->
		<view class="number block">
		<!-- <view class="number block" v-if="Number(orderInfo.status) >= 2 && Number(orderInfo.status) < 5"> -->
			<text>取餐号</text>
			<text>{{orderInfo.id}}</text>
		</view>
		
		<!-- 订单状态 -->
		<!-- 待支付 -->
		<view class="status block" v-if="orderInfo.status == 1">
			<image src="/static/restaurant/order/status1.png" mode="widthFix"></image>
			<text class="text">待支付</text>
			<!-- <view class="time">
				<text>交易剩余时间</text>
				<text> 11:39 </text>
			</view> -->

			<view class="btn">
				<text class="left" @tap.stop="cancel(orderInfo)">取消订单</text>
				<text class="right" @tap.stop="pay(orderInfo)" v-if="orderInfo.shop.shop_status == 1">去支付</text>
			</view>
		</view>

		<!-- 菜品制作中 -->
		<view class="status block" style="padding-bottom: 20rpx;" v-if="orderInfo.status == 2">
			<image src="/static/restaurant/order/status2.png" mode="widthFix"></image>
			<text class="text">菜品制作中</text>
			<!-- <view class="time">
				<text>预计</text>
				<text> 11:39 </text>
				<text>左右制作完成</text>
			</view> -->

			<!-- <view class="btns">
				<image src="/static/restaurant/common/notice.png" mode="widthFix"></image>
				<text>催单</text>
			</view> -->
		</view>

		<!-- 菜品配送中 -->
		<view class="status block" style="padding-bottom: 20rpx;" v-if="orderInfo.status == 4">
			<image src="/static/restaurant/order/status3.png" mode="widthFix"></image>
			<text class="text">菜品配送中</text>
			<!-- <view class="time">
				<text>预计</text>
				<text> 16:30 </text>
				<text>之前送达，请耐心等待</text>
			</view> -->

			<view class="btn">
				<text class="right" @tap.stop="confirm(orderInfo)">确认收货</text>
				<text class="left" @tap.stop="addOrder(orderInfo)" v-if="orderInfo.shop.shop_status == 1">再来一单</text>
			</view>
		</view>


		<!-- 订单已取消 -->
		<view class="status block" v-if="orderInfo.status == 9" :style="{'padding-bottom':orderInfo.shop.shop_status == 1 ? 0 : '20rpx' }">
			<image src="/static/restaurant/order/status4.png" mode="widthFix"></image>
			<text class="text">订单已取消</text>
			<view class="time">
				<text>感谢您的购买，欢迎下次光临</text>
			</view>

			<view class="add" v-if="orderInfo.shop.shop_status == 1">
				<image src="/static/restaurant/order/add.png" mode="widthFix"></image>
				<text @tap.stop="addOrder(orderInfo)">再来一单</text>
			</view>
		</view>

		<!-- 订单已完成 -->
		<view class="status block" v-if="orderInfo.status == 5" :style="{'padding-bottom':orderInfo.shop.shop_status == 1 ? 0 : '20rpx' }">
			<image src="/static/restaurant/order/status5.png" mode="widthFix"></image>
			<text class="text">订单已完成</text>
			<view class="time">
				<text>感谢您的购买，欢迎下次光临</text>
			</view>

			<view class="add" v-if="orderInfo.shop.shop_status == 1">
				<image src="/static/restaurant/order/add.png" mode="widthFix"></image>
				<text @tap.stop="addOrder(orderInfo)">再来一单</text>
			</view>
		</view>

		<!-- 地址 -->
		<view class="address block" v-if="orderInfo.is_takeaway == 2">
			<view class="text">
				<text>取餐门店</text>
				<text>{{orderInfo.shop.name}}</text>
			</view>

			<view class="text">
				<text>门店地址</text>
				<text>{{orderInfo.shop.citys}}{{orderInfo.shop.address}}</text>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="goods-box block">
			<view class="store">
				<text class="text-cut-1">{{orderInfo.shop.name}}</text>
				<view class="disabled" v-if="orderInfo.shop.shop_status > 1">{{orderInfo.shop.shop_status == 2 ? '暂停营业' : orderInfo.shop.shop_status == 3 ? '停止营业' : ''}}</view>
			</view>
			<view class="goods">
				<view class="item" v-for="item in orderInfo.ordergoods" :key="item.id">
					<view class="left">
						<image :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
						<view class="info">
							<text>{{item.title}}</text>
							<text>x{{item.number}}</text>
						</view>
					</view>
					<view class="money">
						￥{{item.price}}
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="text" v-if="Number(orderInfo.discount_price) > 0">
					<view class="left">
						<view class="image">劵</view>
						<text>优惠劵</text>
					</view>
					<text style="color: #f00;">-￥{{orderInfo.discount_price}}</text>
				</view>
				
				<view class="text" v-if="Number(orderInfo.subside_price) > 0">
					<view class="left">
						<text>补贴金额</text>
					</view>
					<text style="color: #f00;">-￥{{orderInfo.subside_price}}</text>
				</view>
				
				<view class="total">
					<text>合计</text>
					<text>￥{{orderInfo.asmoney}}</text>
				</view>
			</view>
		</view>

		<!-- 门店信息 -->
		<view class="store block">
			<view class="head">
				<text>门店信息</text>
				<view class="right">
					<image :src="$wanlshop.oss('/uploads/staticImage/restaurant/common/phone.png')" mode="widthFix" @tap="call(orderInfo.shop.mobile)"></image>
					
					<image src="/static/restaurant/common/address.png" mode="widthFix" @tap="goTo"></image>
				</view>
			</view>
			<view class="list">
				<view class="text">
					<text>取餐门店</text>
					<text>{{orderInfo.shop.name}}</text>
				</view>
				<view class="text">
					<text>门店地址</text>
					<text>{{orderInfo.shop.citys}}{{orderInfo.shop.address}}</text>
				</view>
				<view class="text">
					<text>联系方式</text>
					<text>{{orderInfo.shop.mobile}}</text>
				</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="order block">
			<view class="text">
				<text>就餐方式</text>
				<text>{{orderInfo.is_takeaway == 1 ? '外卖' : '堂食'}}</text>
			</view>
			<view class="text" v-if="orderInfo.is_takeaway == 1">
				<text>用餐人数</text>
				<text>{{orderInfo.tableware_num}}人</text>
			</view>
			<view class="text" v-if="orderInfo.is_takeaway == 1">
				<text>配送地址</text>
				<view class="addres">
					<text>{{orderInfo.address.address}}</text>
					<text>{{orderInfo.address.name}} {{orderInfo.address.mobile}}</text>
				</view>
			</view>
			<view class="text" v-if="orderInfo.is_takeaway == 1" @tap="call(orderInfo.delivery_mobile)">
				<text>配送人员</text>
				<view class="addres" style="justify-content: flex-end;align-items: center;flex-direction: initial;">
					<text>{{orderInfo.delivery_name}}</text>
					<image src="/static/restaurant/common/mobile.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="text" style="margin-top: 20rpx;">
				<text>订单编号</text>
				<view class="right">
					<text>{{orderInfo.order_no}}</text>
					<text @tap="$wanlshop.copy(orderInfo.order_no)">复制</text>
				</view>
			</view>
			<view class="text">
				<text>下单时间</text>
				<text>{{$wanlshop.timeToDate(orderInfo.createtime)}}</text>
			</view>
			<view class="text" v-if="orderInfo.status > 1">
				<text>支付方式</text>
				<text>{{orderInfo.pay_type ? payType[orderInfo.pay_type] : '现金支付'}}</text>
			</view>
			<view class="text" v-if="orderInfo.is_takeaway == 1">
				<text>联系方式</text>
				<text>{{orderInfo.address.mobile}}</text>
			</view>
			<view class="text">
				<text>备注</text>
				<text>{{orderInfo.memo || '-'}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				payType:['现金支付','余额支付','微信支付','支付宝支付'],
				// payType: {
				// 	balance: '余额支付',
				// 	wechat: '微信支付',
				// 	alipay: '支付宝支付'
				// },
				orderInfo: null,
				// is_takeaway 1 外卖 2 堂食
			}
		},
		computed: {
			...mapState(['user', 'common'])
		},
		onLoad(option) {
			this.loadData(option.id)
		},
		methods: {
			async loadData(id) {
				let res = await this.$api.getOrderInfo({
					order_type: 'goods',
					order_id: id
				});
				if (res.code == 1) {
					this.orderInfo = res.data;
				}
			},
			call(mobiles) {
				uni.makePhoneCall({
					phoneNumber: mobiles
				});
			},
			goTo() {
				wx.openLocation({
					latitude: Number(this.orderInfo.shop.lat), // 上海的纬度
					longitude: Number(this.orderInfo.shop.lng), // 上海的经度
					name: this.orderInfo.shop.name, // 地点名称
					address: this.orderInfo.shop.address, // 地址的详细说明
					scale: 18, // 缩放比例
					success: function(res) {
						console.log('打开地图成功');
					},
					fail: function(err) {
						console.log('打开地图失败', err);
					}
				});

			},
			
			async cancel(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认取消该订单？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.cancelOrder({
								order_id:item.id
							});
							if(res.code == 1) {
								this.$wanlshop.msg('订单取消成功');
								this.orderInfo.status = 9
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			pay(item) {
				this.$wanlshop.to(`/pages/user/money/pay?id=${item.id}&type=canteen`)
			},
			async addOrder(item) {
				let ordergoods = item.ordergoods;
				let data = []
				ordergoods.forEach(item => {
					data.push({
						goods_id:item.goods_id,
						number:item.number,
					})
				})
				let res = await this.$api.getCarStorage({
					cart: data
				});
				if (res.code == 1) {
					this.$wanlshop.to('/pages/restaurant/index/submit')
				}
			},
			
			async confirm(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认确认收货？',
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.confirmOrder({
								order_no: item.order_no
							});
							if (res.code == 1) {
								this.$wanlshop.msg('确认收货成功');
								this.orderInfo.status = 5
							}
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>
<style lang="less">
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="less" scoped>
	.pages {
		padding-top: 20rpx;

		.block {
			width: 722rpx;
			margin: 0 auto;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
		}

		.status {
			width: 710rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			// border-bottom: 1rpx solid #E0E0E0;
			align-items: center;
			padding-top: 42rpx;
			margin-bottom: 20rpx;

			image {
				width: 70rpx;
				height: 70rpx;
			}

			.text {
				color: #333333;
				font-size: 38rpx;
				margin: 20rpx 0 10rpx 0;
				// padding-bottom: 40rpx;
			}

			.time {
				font-size: 28rpx;

				text {
					&:nth-child(1) {
						color: #555555;
					}

					&:nth-child(2) {
						color: #FA802A;
					}

					&:nth-child(3) {
						color: #555555;
					}
				}
			}

			.btn {
				margin-top: 20rpx;
				height: 124rpx;
				width: 100%;
				position: relative;
				display: flex;
				justify-content: center;
				&::after {
					position: absolute;
					display: inline-block;
					content: "";
					width: 680rpx;
					height: 1px;
					background-color: #E0E0E0;
					top: 0;
					left: 10rpx;
				}

				text {
					display: inline-block;
					width: 50%;
					height: 100%;
					font-size: 32rpx;
					text-align: center;
					line-height: 124rpx;
					position: relative;

					&.left {
						color: #555555;
					}

					&.right {
						color: #FA802A;
					}

					&:nth-child(2)::after {
						position: absolute;
						display: inline-block;
						content: "";
						width: 1px;
						height: 54rpx;
						background-color: #E0E0E0;
						left: 0;
						top: 35rpx;
					}
				}
			}

			.btns {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 164rpx;
				width: 100%;
				position: relative;
				justify-content: center;
				margin-top: 40rpx;

				&::after {
					position: absolute;
					display: inline-block;
					content: "";
					width: 680rpx;
					height: 1px;
					background-color: #E0E0E0;
					top: 0;
					left: 10rpx;
				}

				image {
					width: 46rpx;
					height: 52rpx;
					margin-bottom: 6rpx;
				}

				text {
					color: #555555;
					font-size: 28rpx;
				}
			}

			.add {
				display: flex;
				align-items: center;
				height: 124rpx;
				width: 100%;
				position: relative;
				justify-content: center;
				margin-top: 40rpx;

				&::after {
					position: absolute;
					display: inline-block;
					content: "";
					width: 680rpx;
					height: 1px;
					background-color: #E0E0E0;
					top: 0;
					left: 10rpx;
				}

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}

				text {
					color: #FA802A;
					font-size: 36rpx;
					display: inline-block;
					line-height: 36rpx;
					height: 36rpx;
				}
			}
		}

		.number {
			height: 216rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			text {
				&:nth-child(1) {
					color: #555555;
					font-size: 32rpx;
				}

				&:nth-child(2) {
					color: #FA802A;
					font-size: 48rpx;
					font-weight: 500;
					margin-top: 16rpx;
				}
			}
		}

		.address {
			height: 212rpx;
			padding: 30rpx 16rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.text {
				display: flex;
				justify-content: flex-start;
				// align-items: center;
				margin-top: 16rpx;

				&:nth-child(1) {
					margin-top: 0;
				}

				text {
					font-size: 28rpx;

					&:nth-child(1) {
						color: #999999;
						display: inline-block;
						width: 140rpx;
					}

					&:nth-child(2) {
						color: #333333;
						width: calc(100% - 140rpx);
					}
				}
			}
		}

		.goods-box {
			.store {
				height: 78rpx;
				margin: 0 auto;
				padding: 0 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text {
					color: #333333;
					font-size: 28rpx;
					display: inline-block;
					flex: 1;
				}
				.disabled {
					background-color: #999;
					color: #fff;
					padding: 2rpx 10rpx;
					border-radius: 6rpx;
					font-size: 22rpx;
					margin-left: 20rpx;
				}
			}

			.goods {
				width: 700rpx;
				box-sizing: border-box;
				margin: 0 auto;
				padding: 20rpx 16rpx;
				border-bottom: 1px solid #E0E0E0;
				border-top: 1px solid #E0E0E0;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.left {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						image {
							width: 108rpx;
							height: 108rpx;
							margin-right: 26rpx;
							border-radius: 10rpx;
						}
					}

					.info {
						display: flex;
						flex-direction: column;

						text {
							font-size: 28rpx;

							&:nth-child(1) {
								color: #333333;
								margin-bottom: 6rpx;
							}

							&:nth-child(2) {
								color: #999999;
							}
						}
					}

					.money {
						color: #FF2222;
						font-size: 28rpx;
					}
				}
			}

			.bottom {
				padding: 20rpx 16rpx;

				.text {
					color: #333333;
					font-size: 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.image {
						display: inline-block;
						font-size: 22rpx;
						width: 32rpx;
						height: 32rpx;
						line-height: 32rpx;
						text-align: center;
						background-color: #FA802A;
						color: #fff;
						border-radius: 6rpx;
						margin-right: 10rpx;
					}
				}

				.total {
					display: flex;
					justify-content: flex-end;
					margin-top: 30rpx;

					text {
						color: #333333;

						&:nth-child(1) {
							font-size: 32rpx;
							margin-top: 10rpx;
						}

						&:nth-child(2) {
							font-size: 40rpx;
							font-size: 500;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.store {
			padding: 26rpx 0;
			box-sizing: border-box;

			.head {
				height: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 16rpx;

				text {
					color: #333333;
					font-size: 36rpx;
					font-weight: 500;
				}

				.right {
					position: relative;

					&::after {
						position: absolute;
						content: "";
						display: inline-block;
						width: 1px;
						height: 50rpx;
						background-color: #E3E3E3;
						left: 76rpx;
						top: 0;
					}

					image {
						width: 50rpx;
						height: 50rpx;

						&:nth-child(1) {
							margin-right: 26rpx;
						}

						&:nth-child(2) {
							margin-left: 26rpx;
						}
					}
				}
			}

			.list {
				padding: 0 16rpx;
				margin-top: 30rpx;

				.text {
					display: flex;
					justify-content: space-between;
					// align-items: center;
					// height: 60rpx;
					padding: 10rpx 0;

					text {
						display: inline-block;
						font-size: 28rpx;

						&:nth-child(1) {
							color: #999999;
							width: 140rpx;
						}

						&:nth-child(2) {
							color: #333333;
							text-align: right;
							width: calc(100% - 140rpx);
						}
					}
				}
			}
		}

		.order {
			padding: 20rpx 16rpx;
			box-sizing: border-box;

			.text {
				display: flex;
				justify-content: space-between;
				align-items: center;
				// height: 60rpx;
				padding: 10rpx 0;

				text {
					font-size: 28rpx;

					&:nth-child(1) {
						color: #999999;
						margin-right: 20rpx;
					}

					&:nth-child(2) {
						color: #333333;
						text-align: right;
					}
				}

				.right {
					text {
						font-size: 28rpx;

						&:nth-child(1) {
							color: #333333;
							margin-right: 20rpx;
						}

						&:nth-child(2) {
							color: #999999;
							width: 64rpx;
							height: 36rpx;
							text-align: center;
							line-height: 36rpx;
							border-radius: 4rpx;
							border: 1px solid #999999;
							font-size: 20rpx;
							display: inline-block;
						}
					}
				}

				.addres {
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					image {
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
					text {
						margin-right: 0;
						color: #333;

						&:last-child {
							color: #555555;
						}
					}
				}
			}
		}
	}
</style>